<template>
    <div class="choose_info">
		<div class="header">
			<van-nav-bar
				title="直辖市（省）"
        @click-left="onClickLeft"
				/>
		</div>
        <div class="choose_content">

            <van-button type="default" style=""
                        v-for="(item,i) in items"
                        :class="{'active':isActive==i}"
                        :key="i"
                        @click="dianji(i,item.province_id)"
            >{{item.province_name}}</van-button>

        </div>
        <div class="clear"></div>
        <div class="choose_foot">
            <van-button type="info" @click="next()">下一步</van-button>
        </div>
	</div>
</template>
<script>
export default {
    data() {
        return {
            isActive:-1,
            provinceId:'',
            items:[],
        }
    },
    mounted:function(){
      this.get_provinces();
    },
    methods:{
        onClickLeft(){
            this.$router.back(-1);
        },
        next(){
            var provinceId = this.provinceId;
            if(provinceId == ''){
                this.$toast("请选择省");
                return false;
            }
            this.$router.push({
                path:'/choosecity',
                query:{provinceId:this.provinceId}
            })
        },
        get_provinces(){
            const that = this;
            this.$sendRequest('/v2/get_provinces',"").then(function(res){
                console.log(res.data);
                that.items = res.data.result.provinces;
                console.log(that.items);
            })
        },
        dianji(i,provinceId){
            this.isActive = i;
            this.provinceId = provinceId;
        }
    }
}
</script>
<style scoped="scoped">
    .choose_info{
        height: 100vh;
        background-color: #fff;
    }
    .clear{
        clear: both;
    }
	.header>>>.van-cell__title{
		  width: 63px !important;
	}
	.header >>> .van-icon-arrow-left{
		color: #2c3e50;
	}
  .active{
    border: 1px solid #4C9FFD;
    color: #ffffff !important;
    background-color:#4C9FFD;
  }
    .choose_content {
        width: 100%;
        box-sizing: border-box;
        padding: 0.5vh 4.6vw;
        padding-top: 2.3vh;
    }
    .choose_content >>> .van-button--default{
        width: 41.4vw;
        height: 6.6vh;
        box-sizing: border-box;
        border: 1px solid #4C9FFD;
        color: #4C9FFD;
        /*background-color: rgb(242, 242, 242);*/

        /* border-radius: 3px; */
        margin: 1.2vh 2vw;
        float: left;
        font-size: 0.95rem;
    }
    /* .van-button::after{
        background-color: #4C9FFD;
    } */
    .choose_foot{
        width: 100%;
        background-color: aquamarine;
        position:fixed;
        bottom: 0;
    }
    .choose_foot >>>.van-button--info{
        width: 100%;
    }
</style>

